<template>
  <!-- antdv中文版 -->
  <a-config-provider :locale="locale">
    <div id="app">
      <div class="wrap">
        <div class="scroll">
          <router-view v-if="isRouterAlive"></router-view>
        </div>
      </div>
    </div>
  </a-config-provider>
</template>
<script>
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
export default {
  name: "app",
    provide () {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      locale: zhCN,
       isRouterAlive: true,
    };
  },
  components: {},
  mounted() {},
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
  watch: {},
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
html {
  width: 100%;
  overflow-x: hidden;
}
a {
  text-decoration: none;
}
.wrap {
  width: 100%;
  overflow: hidden; //关键
}
.scroll {
  width: 100%;
  // padding-bottom: 1px; //height + padding-bottom 必须大于.wrap height  overflow-x: auto;
}
#app {
  width: 100%;
  height: 100%;
}
#app a.router-link-exact-active {
  // 重写 当前激活状态字体 为红色 ;如果router-link中设置了tag属性，那这里的a就应换成tag的属性值，来实现样式的重写操作。
  color: red;
  text-decoration: underline;
  text-decoration: none;
  cursor: pointer;
}
body {
  font-size: 0.9em;
}
//输入框样式
input::-webkit-input-placeholder {
  color: #9fa1ab !important;
  font-size: 14px !important;
  font-family: "PingFangSC-Regular" !important;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #9fa1ab !important;
  font-size: 14px !important;
  font-family: "PingFangSC-Regular" !important;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #9fa1ab !important;
  font-size: 14px !important;
  font-family: "PingFangSC-Regular" !important;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #9fa1ab !important;
  font-size: 14px !important;
  font-family: "PingFangSC-Regular" !important;
}
.ant-input {
  border: 1px solid rgba(0, 6, 32, 0.16) !important;
  border-radius: 2px !important;
}
.ant-form-explain {
  position: absolute !important;
}
//输入框hover样式
.ant-input:hover {
  border-color: #1890ff !important;
}
.ant-input:focus {
  border-color: #1890ff !important;
  box-shadow: none !important;
}
//按钮内边距
.ant-btn {
  padding: 0 16px !important;
  border-radius: 2px !important;
}
.ant-btn:hover,
.ant-btn:focus {
  color: #1890ff !important;
  border-color: #1890ff !important;
}
//按钮样式
.ant-btn-primary {
  background-color: #1890ff !important;
  border-color: #1890ff !important;
}
.ant-btn-primary:hover,
.ant-btn-primary:focus {
  opacity: 0.8 !important;
  color: #fff !important;
}
.ant-btn-danger:hover,
.ant-btn-danger:focus {
  background-color: #fff !important;
  color: #ff4d4f !important;
  border-color: #ff4d4f !important;
}
.ant-btn-primary[disabled] {
  color: rgba(0, 0, 0, 0.25) !important;
  background-color: #f5f5f5 !important;
  border-color: #d9d9d9 !important;
}
//操作栏文字链接
.ant-btn-link {
  height: 100% !important;
  line-height: 1 !important;
  padding: 0 8px !important;
  color: #1890ff !important;
}
.ant-btn-link + .ant-btn-link {
  border-left: 1px solid #e8e8e8 !important;
}
.aLink + .aLink .ant-btn-link {
  border-left: 1px solid #e8e8e8 !important;
}
.ant-btn-link:hover,
.ant-btn-link:focus {
  opacity: 0.8 !important;
  border: 1px solid transparent !important;
  border-left: 1px solid #e8e8e8 !important;
}

//弹窗样式
.ant-modal-header {
  background-color: #fafbff !important;
  border-bottom: none !important;
  border-radius: 2px 2px 0 0 !important;
}
.ant-modal-title {
  font-size: 16px !important;
  color: #000 !important;
  font-family: "PingFangSC-Medium" !important;
}
.ant-modal-close-x {
  font-size: 14px !important;
}
.ant-modal-body {
  padding: 24px 86px 15px !important;
}
.ant-modal-footer {
  border-top: none !important;
  padding: 0 24px 12px !important;
  border-radius: 0 0 2px 2px !important;
}
.ant-modal-content {
  border-radius: 2px !important;
}
.ant-modal-confirm .ant-modal-body {
  padding: 32px 32px 24px !important;
}
//tab栏
.ant-tabs-nav .ant-tabs-tab-active,
.ant-tabs-nav .ant-tabs-tab:hover {
  color: #1890ff !important;
}
.ant-tabs-ink-bar {
  background-color: #1890ff !important;
}

//表单输入框样式
.ant-form-item-label > label::after {
  display: none;
}
.ant-form label {
  font-size: 12px !important;
  color: #5a5d6e !important;
}
.ant-form-item {
  margin-bottom: 32px !important;
}
.ant-form-item-label {
  line-height: 21px !important;
  margin-bottom: 8px !important;
}
.ant-form-item-control {
  line-height: 32px !important;
}
//下拉选择框
.ant-select-selection {
  border-radius: 2px !important;
}
.ant-select-selection:hover {
  border-color: #1890ff !important;
}
.ant-select-selection:focus {
  border-color: #1890ff !important;
  box-shadow: none !important;
}
.ant-select-focused .ant-select-selection,
.ant-select-selection:active {
  border-color: #1890ff !important;
  box-shadow: none !important;
}

//数字输入框
.ant-input-number {
  width: 100% !important;
  border-radius: 2px !important;
}
.ant-input-number:hover,
.ant-input-number:focus,
.ant-input-number-focused {
  border-color: #1890ff !important;
  box-shadow: none !important;
}
//表单验证输入框
.has-error .ant-input,
.has-error .ant-input-number,
.has-error .ant-select-selection,
.has-error .ant-select-focused .ant-select-selection {
  border-color: #f5222d !important;
}
//滚动条样式
.ant-table-body,
.ant-table-header,
.ant-drawer-wrapper-body {
  word-break: break-all;
  &::-webkit-scrollbar {
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(144, 147, 153, 0.5);
  }
  &::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: transparent;
  }
}
// 隔行变色
.light-row {
  background-color: #fff;
}
.dark-row {
  background-color: #fafafa;
}
// 表格列下边框
.ant-table-tbody > tr > td {
  border-bottom: 0 !important;
}

//侧边栏icon边距
.ant-menu-item .anticon,
.ant-menu-submenu-title .anticon {
  margin-right: 16px !important;
  font-size: 16px !important;
}
// .anticon svg {
//   height: 16px !important;
//   line-height: 16px !important;
// }
// 表格head背景色
.ant-table-thead > tr > th {
  background: #f8f9fd !important;
}

//表格行hover背景色
.ant-table-thead
  > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
  > td,
.ant-table-tbody
  > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
  > td,
.ant-table-thead
  > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
  > td,
.ant-table-tbody
  > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
  > td {
  background: #e7ecfb !important;
}
.ant-table-thead > tr > th {
  white-space: nowrap;
  font-size: 12px;
}
.ant-table-row td {
  white-space: nowrap;
}
.ant-table-thead > tr > th {
  padding: 15px 16px !important;
  border: none !important;
}
.ant-table-tbody > tr > td {
  padding: 8px 16px !important;
}

// 复选框背景色
.ant-checkbox-checked .ant-checkbox-inner,
.ant-tree-checkbox-checked .ant-tree-checkbox-inner {
  background-color: #1890ff !important;
  border-color: #1890ff !important;
}
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-input:focus + .ant-checkbox-inner,
.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-inner,
.ant-tree-checkbox:hover .ant-tree-checkbox-inner,
.ant-tree-checkbox-input:focus + .ant-tree-checkbox-inner {
  opacity: 0.8 !important;
  border-color: #1890ff !important;
}
.ant-checkbox-checked::after,
.ant-tree-checkbox-checked::after {
  border: none !important;
}
.ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: #1890ff !important;
}
//上传图片组件
.ant-upload.ant-upload-select-picture-card:hover {
  border-color: #1890ff !important;
}
//分页
.ant-pagination-total-text {
  margin-right: 16px !important;
}
.ant-pagination-item-active a,
.ant-pagination-item:focus a,
.ant-pagination-item:hover a {
  color: #1890ff !important;
}
.ant-pagination-item-active,
.ant-pagination-item:focus,
.ant-pagination-item:hover {
  border-color: #1890ff !important;
}
.ant-pagination-prev:focus .ant-pagination-item-link,
.ant-pagination-next:focus .ant-pagination-item-link,
.ant-pagination-prev:hover .ant-pagination-item-link,
.ant-pagination-next:hover .ant-pagination-item-link {
  color: #1890ff !important;
  border-color: #1890ff !important;
}
.ant-select-arrow {
  color: #5a5d6e !important;
}
.ant-pagination-disabled a,
.ant-pagination-disabled:hover a,
.ant-pagination-disabled:focus a,
.ant-pagination-disabled .ant-pagination-item-link,
.ant-pagination-disabled:hover .ant-pagination-item-link,
.ant-pagination-disabled:focus .ant-pagination-item-link {
  color: #90929d !important;
  border-color: #d9d9d9 !important;
  background-color: #e7e7e9 !important;
}
.ant-table-pagination .ant-select-selection {
  width: 102px !important;
  border-radius: 2px !important;
}
.ant-pagination-options-quick-jumper input {
  border-radius: 2px !important;
  width: 74px !important;
}
.ant-pagination-options-quick-jumper input:hover,
.ant-pagination-options-quick-jumper input:focus,
.ant-select-focused .ant-select-selection,
.ant-select-open .ant-select-selection {
  border-color: #1890ff !important;
  box-shadow: none !important;
}
.ant-select-dropdown-menu-item-selected {
  background: #fff !important;
}
.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
  background: #ebefff !important;
}
.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
  background: #f5f5f6 !important;
}
.ant-pagination-item {
  margin-right: 4px !important;
  border-radius: 2px !important;
}
.ant-pagination-prev {
  margin-right: 4px !important;
}
.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  border-radius: 2px !important;
}
.uploadTip {
  font-size: 12px;
  color: #606266;
  position: absolute;
  top: 10px;
  left: 0;
}
.ant-table-scroll .ant-table-body {
  overflow: auto !important;
}
@media screen and (max-width: 1300px) {
  html {
    width: 100%;
    overflow-x: auto;
  }
}
@media screen and (max-width: 415px) {
  .wrap {
    width: 100%;
    overflow: hidden; //关键
  }
  .scroll {
    width: 100%;
    //padding-bottom: 1px; //height + padding-bottom 必须大于.wrap height  overflow-x: auto;
  }
}
</style>
